<template>
  <!-- 主页: 需要为单节点, 因为是路由界面, 会直接加载到 transition 组件中, 且该组件要求只能包裹一个根标签 -->
  <div class="">
    <n-grid cols="1 560:2 800:3 1100:4 1500:5" :x-gap="24" :y-gap="24">
      <n-grid-item
        v-for="item in mainData.newsArr.filter((item) => item.show)"
        :key="item.label"
      >
        <!--  :style="{ animationDelay: index / 10 + 0.2 + 's' }" -->
        <HotList :hotData="item"></HotList>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup lang="ts">
// 先把数据写死
import { useMainDataStore } from '@/store/mainData'
import HotList from '@/components/HotList.vue'
const mainData = useMainDataStore()
</script>

<style lang="scss" scoped></style>
